<!-- 添加已有账号 -->
<template>
<com-dialog class="add-exists-user-wp"
  v-model="visible"
  title="添加已有账号"
  width="1000px">
  <div class="this-table-wp com-table-wp">
    <com-search :form="form" :showAdvanced="false" @search="search()">
      <template slot-scope="scope">
        <el-form-item label="登录账号" prop="username">
          <el-input v-model="form.username" placeholder="请输入登录账号" clearable></el-input>
        </el-form-item>
      </template>
    </com-search>
    <div class="com-check-box">
      <span class="text com-mr20">当前选择 <b>{{selection.length}}</b> 项</span>
      <el-link class="btn" type="primary" :underline="false" @click="handleClearSelection()">清空</el-link>
    </div>
    <div class="table-box">
      <el-table ref="table" :data="table.data"
        max-height="308px"
        border
        size="medium"
        :header-cell-style="{'background-color': '#fafafa'}"
        row-key="id"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55"
          align="center"
          reserve-selection>
        </el-table-column>
        <el-table-column v-for="(item, index) in table.head" :key="index"
          :prop="item.key"
          :label="item.name"
          :min-width="item.width"
          :formatter="item.formatter"
          align="center">
        </el-table-column>
      </el-table>
      <com-page :page="page" @change="changePage"></com-page>
    </div>
  </div>
  <div slot="footer">
    <el-button size="medium" @click="visible = false">取消</el-button>
    <el-button :loading="btnLoading" type="primary" size="medium" @click="submit()">确认</el-button>
  </div>
</com-dialog>
</template>
<script>

import TableMixin from "@/mixins/TableMixin.js";
import {user} from "@/config/api.js";

export default {
  mixins: [TableMixin],
  data () {
    return {
      visible: false,
      loading: null,
      btnLoading: false,

      roleId: '', // 当前的角色id

      // 表单
      form: {
        username: '', // 登录账号
        column: 'createTime',
        order: 'desc'
      },

      // 表格
      table: {
        head: [
          {name: '登录账号', key: 'username'},
          {name: '用户昵称', key: 'realname'},
          {name: '性别', key: 'sex_dictText'},
          {name: '电话', key: 'phone'},
          {name: '部门', key: 'orgCode', width: 180},
        ],
        data: []
      },

      url: {
        list: user.list
      },

    }
  },
  methods: {
    open (roleId) {
      this.roleId = roleId;
      this.search();
      this.visible = true;
    },

    // 提交
    submit () {
      var aSelection = this.$refs.table.selection;
      if (!aSelection.length) {
        this.$message.warning('请选择一个用户！');
        return;
      }
      var param = {
        roleId: this.roleId,
        userIdList: aSelection.map(item => {return item.id;})
      }
      this.btnLoading = true;
      this.$post(user.addSysUserRole, param).then(res => {
        this.btnLoading = false;
        if (res.success) {
          this.$message.success(res.message);
          this.$emit('reload');
          this.visible = false;
        }
      }).catch(() => {
        this.btnLoading = false;
      })
    },

  }
}
</script>
<style lang="scss" scoped>
.add-exists-user-wp {
  .this-table-wp {
    height: 460px;
  }
}
</style>